<template>
	<view class="container">
		<!-- 导航栏 -->
		<uni-nav-bar leftIcon="bars" leftWidth="40rpx" rightWidth="40rpx" fixed="true" @clickLeft="showDrawer()"
			statusBar>
			<view class="search" @click="search()">
				<uni-icons type="search" style="color: #B3B3B3;font-size: 36rpx;"></uni-icons>
				<text>{{realkeyword}}</text>
			</view>
		</uni-nav-bar>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banneer">
			<swiper-item v-for="banner in banners" :key="banner.targetId">
				<image :src="banner.imageUrl" mode="widthFix"></image>
				<!-- 355*132 -->
			</swiper-item>
		</swiper>
		<!-- 推荐歌单 -->
		<view class="song-sheet">
			<text class="song-sheet-title">推荐歌单</text>
			<view class="song-sheet-item">
				<view v-for="(item,i) in songSheet" :key="i" @click="goPlayList(item.id)">
					<image :src="item.picUrl" mode="widthFix"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<uni-drawer ref="showLeft" mode="left">
			<view class="login">
				<image src="../../static/logo.png" mode="aspectFit"></image>
				<text>立即登录</text>
				<uni-icons type="forward" style="color: $uni-base-color;font-size: 28rpx;"></uni-icons>
			</view>
			<uni-list>
				<uni-list-item title="最近播放" />
				<uni-list-item title="本地/下载" />
				<uni-list-item title="收藏和赞" />
			</uni-list>
		</uni-drawer>
		<player v-if="detail"></player>
	</view>
</template>

<script>
	// import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex' //引入mapState

	export default {
		data() {
			return {
				banners: [],
				songSheet: []
			}
		},
		computed: mapState([
			'url',
			'realkeyword',
			'detail'
		]),
		methods: {
			...mapMutations(['setRealkeyword']),
			...mapActions(['getRealkeyword']),
			search() {
				uni.navigateTo({
					url: '../search/search',
				});
			},
			showDrawer() {
				this.$refs.showLeft.open();
			},
			goPlayList(id) {
				uni.navigateTo({
					url: `../play-list/play-list?id=${id}`
				})
			}
		},
		created() {
			uni
				.request({
					url: this.url + "/banner"
				})
				.then((res) => {
					// 此处的 res 参数，与使用默认方式调用时 success 回调中的 res 参数一致
					//console.log(res.data);
					this.banners = res.data.banners
				})
				.catch((err) => {
					// 此处的 err 参数，与使用默认方式调用时 fail 回调中的 err 参数一致
					console.error(err);
				});
			uni
				.request({
					url: this.url + "/personalized"
				})
				.then((res) => {
					// console.log(res.data.result);
					this.songSheet = res.data.result
				})
				.catch((err) => {
					console.error(err);
				});
			// /search/default
			this.getRealkeyword()
		}
	}
</script>

<style lang="scss">
	// 导航栏
	.search {
		width: 100%;
		margin: 8rpx 0;
		border-radius: 36rpx;
		background-color: $uni-bg-color;
		font-size: 36rpx;
		line-height: 72rpx;
		text-align: center;
		color: #B3B3B3;
	}

	// 轮播图
	.banneer {
		width: 750rpx;
		height: 264rpx;
		margin-top: 40rpx;

		swiper-item {
			margin: 0 20rpx;

			image {
				width: 710rpx;
				border-radius: 20rpx;
			}
		}
	}

	// 推荐歌单
	.song-sheet {
		margin: 40rpx 20rpx 0;

		.song-sheet-title {

			font-size: 50rpx;
		}

		.song-sheet-item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			view {
				width: 220rpx;
				margin-top: 20rpx;

				image {
					width: 100%;
				}

				text {
					display: block;
					overflow: hidden;
					height: 60rpx;
					color: $uni-base-color;
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}

		}
	}

	//菜单
	.login {
		margin: 20rpx;
		display: flex;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
			border: #B3B3B3 1px;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		text {
			font-size: 28rpx;
			color: $uni-base-color;
		}
	}
</style>
